<template>
  <MainLayout>
    <section class="img-section">
      <img class="img-section-img" src="/images/index/career/office-1.jpg" alt="" />
    </section>
    <section class="forum-header">
      <div class="container">
        <div class="forum-header-title">加入我们的团队</div>
        <div class="forum-header-content">每一个人都可以用AnyRender来表达自己<br />加入我们，改变3D世界</div>
      </div>
    </section>

    <!-- 津贴和福利 -->
    <section class="welfare-section">
      <div class="welfare-title">津贴和福利</div>
      <div class="welfare-list">
        <div class="welfare-item" v-for="item in welfareList1" :key="item.title">
          <img class="welfare-item-icon" :src="item.icon" alt="" />
          <div class="welfare-item-title">{{ item.title }}</div>
          <div class="welfare-item-desc" v-html="item.desc"></div>
        </div>
      </div>
      <div class="welfare-list gray-bg">
        <div class="welfare-item" v-for="item in welfareList2" :key="item.title">
          <img class="welfare-item-icon" :src="item.icon" alt="" />
          <div class="welfare-item-title">{{ item.title }}</div>
          <div class="welfare-item-desc" v-html="item.desc"></div>
        </div>
      </div>
    </section>

    <section class="img-section">
      <img class="img-section-img" src="/images/index/career/office-2.jpg" alt="" />
    </section>

    <!-- 价值原则 -->
    <section class="value-section">
      <div class="value-title">推动我们前进的价值原则</div>
      <div class="value-list">
        <div class="value-item" v-for="item in valueList" :key="item.title">
          <div class="value-item-title">{{ item.title }}</div>
          <div class="value-item-desc" v-html="item.desc"></div>
        </div>
      </div>
    </section>
  </MainLayout>
</template>

<script setup>
  // 福利列表
  let welfareList1 = [
    {
      icon: "/images/index/career/welfare-1.png",
      title: "灵活的时间表",
      desc: "在你最有效率的时候工作",
    },
    {
      icon: "/images/index/career/welfare-2.png",
      title: "远程工作",
      desc: "在你觉得最有成效的地方工作",
    },
    {
      icon: "/images/index/career/welfare-3.png",
      title: "现场工具室",
      desc: "利用我们的3D打印机、工具和设备供个人使用",
    },
  ];
  let welfareList2 = [
    {
      icon: "/images/index/career/welfare-4.png",
      title: "轻松的工作场所",
      desc: "享受休闲着装规范，<br/>带你的孩子或宠物去上班",
    },
    {
      icon: "/images/index/career/welfare-5.png",
      title: "团队建设活动",
      desc: "加入我们的庆祝活动、场外活动、桌上足球比赛等",
    },
    {
      icon: "/images/index/career/welfare-6.png",
      title: "健康的零食",
      desc: "尽情享受新鲜水果、饮料，<br/>和其他健康的选择",
    },
  ];

  // 价值原则列表
  let valueList = [
    {
      title: "客户满意度",
      desc: "我们一直渴望超越期望，帮助客户取得成功。",
    },
    {
      title: "不断创新",
      desc: "我们不断努力，通过不断发展和寻求新想法来塑造我们行业的未来。",
    },
    {
      title: "追求完美",
      desc: "我们所做的一切都追求卓越。",
    },
    {
      title: "信任和开放的沟通",
      desc: "我们正在建立基于尊重、诚实和开放的关系。",
    },
    {
      title: "有趣和友好的合作",
      desc: "我们在支持和参与的环境中开展工作，并且享受我们所做的事情。",
    },
  ];
</script>

<style lang="scss" scoped>
  @import "@/styles/variables.scss";

  .forum-header {
    padding: 48px 0;

    .container {
      .forum-header-title {
        font-size: 62px;
        font-weight: 500;
        color: #000;
        line-height: 1.6;
        text-align: center;
        letter-spacing: 12px;
      }
      .forum-header-content {
        margin: 20px auto;
        line-height: 1.6;
        text-align: center;
        font-size: 42px;
        color: #000;
      }
    }
    // 响应式 电脑
    @media (max-width: $breakpoint-desktop) {
      .container {
        .forum-header-title {
          font-size: 50px;
          letter-spacing: 2px;
        }
        .forum-header-content {
          font-size: 32px;
        }
      }
    }
    // 响应式 平板
    @media (max-width: $breakpoint-tablet) {
      padding: 32px 0;
      .container {
        .forum-header-title {
          font-size: 36px;
          letter-spacing: 1px;
        }
        .forum-header-content {
          font-size: 26px;
        }
      }
    }
    // 响应式 手机
    @media (max-width: $breakpoint-mobile) {
      padding: 24px 0;
      .container {
        .forum-header-title {
          font-size: 32px;
        }
        .forum-header-content {
          font-size: 20px;
        }
      }
    }
  }

  .img-section {
    padding: 0 0 40px;
    .img-section-img {
      width: 100%;
      object-fit: cover;
    }
  }

  .welfare-section {
    padding: 30px 0 0;
    border-top: 1px solid #e5e5e5;
    .welfare-title {
      font-size: 30px;
      font-weight: 500;
      text-align: center;
      color: #3f1fec;
      margin: 50px auto;
    }
    .welfare-list {
      padding: 0 50px;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      &.gray-bg {
        background-color: #f7f7f7;
        border-top: 1px solid #e5e5e5;
      }
      .welfare-item {
        width: 33%;
        padding: 50px 20px;
        .welfare-item-icon {
          width: 60px;
          height: 60px;
          border-radius: 50%;
          margin-bottom: 30px;
        }
        .welfare-item-title {
          font-size: 32px;
          font-weight: 500;
          color: #383838;
          margin-bottom: 30px;
        }
        .welfare-item-desc {
          font-size: 18px;
          color: #585858;
        }
      }
    }
    // 响应式 大屏幕
    @media (max-width: $breakpoint-2xl) {
      .welfare-title {
        margin: 30px auto;
      }
      .welfare-list {
        .welfare-item {
          .welfare-item-icon {
            width: 50px;
            height: 50px;
            margin-bottom: 25px;
          }
          .welfare-item-title {
            font-size: 32px;
            margin-bottom: 25px;
          }
          .welfare-item-desc {
            font-size: 18px;
          }
        }
      }
    }
    // 响应式 电脑
    @media (max-width: $breakpoint-desktop) {
      .welfare-title {
        margin: 30px auto;
      }
      .welfare-list {
        padding: 0 50px;
        flex-wrap: wrap;

        .welfare-item {
          width: 33%;
          padding: 30px 15px;
          .welfare-item-icon {
            width: 40px;
            height: 40px;
            margin-bottom: 20px;
          }
          .welfare-item-title {
            font-size: 26px;
            margin-bottom: 20px;
          }
          .welfare-item-desc {
            font-size: 18px;
          }
        }
      }
    }
    // 响应式 平板
    @media (max-width: $breakpoint-tablet) {
      .welfare-list {
        padding: 0 40px;
        .welfare-item {
          width: 33%;
          padding: 50px 20px;
          .welfare-item-icon {
            width: 40px;
            height: 40px;
          }
          .welfare-item-title {
            font-size: 24px;
          }
          .welfare-item-desc {
            font-size: 16px;
          }
        }
      }
    }
    // 响应式 手机
    @media (max-width: $breakpoint-mobile) {
      .welfare-list {
        padding: 0 30px;
        .welfare-item {
          width: 100%;
          padding: 20px;
          .welfare-item-icon {
            width: 40px;
            height: 40px;
          }
          .welfare-item-title {
            font-size: 22px;
          }
          .welfare-item-desc {
            font-size: 14px;
          }
        }
      }
    }
  }

  .value-section {
    .value-title {
      font-size: 36px;
      font-weight: 500;
      color: #383838;
      padding: 70px 0;
      text-align: center;
    }
    .value-list {
      .value-item {
        padding: 50px 80px;
        border-top: 1px solid #e5e5e5;
        .value-item-title {
          font-size: 36px;
          font-weight: 500;
          color: #383838;
          margin-bottom: 30px;
        }
        .value-item-desc {
          font-size: 16px;
          color: #585858;
        }
      }
    }
    // 响应式 平板
    @media (max-width: $breakpoint-tablet) {
      .value-title {
        font-size: 32px;
        padding: 50px 0;
      }
      .value-list {
        .value-item {
          padding: 50px;
          .value-item-title {
            font-size: 32px;
            margin-bottom: 25px;
          }
        }
      }
    }
    // 响应式 手机
    @media (max-width: $breakpoint-mobile) {
      .value-title {
        font-size: 26px;
        padding: 40px 0;
      }
      .value-list {
        .value-item {
          padding: 30px 20px;
          .value-item-title {
            font-size: 26px;
          }
        }
      }
    }
  }
</style>
